<template>
	<view class="page evaluate_page">
		<view class="evaluate_total">
			<view class="total">
				<view class="total_percentage">
					98%
				</view>
				<view class="total_star">
					<view class="star_list">
						<image class="star" src="../../static/icon/doctor/star-icon.png" mode="widthFix" v-for="item in 5"
							:key="item"></image>
					</view>
					<view>
						2389条评价
					</view>
				</view>
			</view>
			<view class="statistics">
				<view class="statistics_item">
					<view class="item_text">
						好评
					</view>
					<view class="item_canvas">
						<view class="fill"></view>
					</view>
					<view class="item_nums">
						100%
					</view>
				</view>
				<view class="statistics_item">
					<view class="item_text">
						中评
					</view>
					<view class="item_canvas">
						<view class="fill"></view>
					</view>
					<view class="item_nums">
						80%
					</view>
				</view>
				<view class="statistics_item">
					<view class="item_text">
						差评
					</view>
					<view class="item_canvas"></view>
					<view class="item_nums">
						0%
					</view>
				</view>
			</view>
		</view>
		<view class="evaluate_type">
			<view class="evaluate_type_item active">
				全部999+
			</view>
			<view class="evaluate_type_item">
				好评876
			</view>
			<view class="evaluate_type_item">
				中评10
			</view>
			<view class="evaluate_type_item">
				差评
			</view>
		</view>
		<view class="evaluate_list">
			<evaluateItem></evaluateItem>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		}
	}
</script>

<style lang="scss" scoped>
	.evaluate_page {
		padding: 50rpx;
		background-color: #fff;

		.evaluate_total {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.total {
				position: relative;
				flex: 0 0 55%;
				display: flex;
				align-items: center;

				&::after {
					content: '';
					position: absolute;
					left: 100%;
					top: 50%;
					transform: translate(-50%, -50%);
					width: 1rpx;
					height: 100%;
					background-color: #EEEEEE;
				}


				.total_percentage {
					flex: 0 0 140rpx;
					font-weight: bold;
					font-size: 68rpx;
					color: #3E6FFE;
				}

				.total_star {
					flex: auto;
					font-size: 24rpx;
					color: #999999;
					text-align: center;

					.star_list {
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 20rpx;

						.star {
							width: 23rpx;
							height: 23rpx;
							margin-left: 10rpx;

							&:first-child {
								margin: 0;
							}
						}
					}
				}
			}

			.statistics {
				flex: 0 0 45%;

				.statistics_item {
					padding-left: 20rpx;
					margin-bottom: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 22rpx;
					color: #999999;

					&:last-child {
						margin: 0;
					}

					.item_text {
						flex: 0 0 50rpx;

						&:last-child {
							text-align: right;
						}
					}

					.item_canvas {
						flex: 0 0 55%;
						width: 55%;
						height: 20rpx;
						background-color: #EEEEEE;
						border-radius: 50rpx;
						overflow: hidden;

						.fill {
							width: 80%;
							height: 100%;
							background-color: #F1AE34;
						}
					}

					.item_nums {
						flex: 0 0 60rpx;
					}
				}
			}
		}

		.evaluate_type {
			flex: 0 0 40%;
			margin: 30rpx 0;
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			.evaluate_type_item {
				margin-right: 20rpx;
				padding: 8rpx 10rpx;
				border-radius: 10rpx;
				background-color: #F5F5F5;
				font-size: 24rpx;
				color: #999999;

				&.active {
					box-sizing: border-box;
					border: 1px solid #3B6CFE;
					color: #3B6CFE;
				}
			}
		}
	}
</style>